<template>
  <div id="ApplicationProcess">
    <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;font-size: 20px;padding: 0 10px;">
      <span style="margin-right: 10px;" class="line"></span>
      申请入驻流程
    </p>
    <div class="top">
      <img style="width:80%;margin: 0 auto" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/11.png" />
      <p>
        <span style="width:20%;display: inline-block;text-align: center;">申请</span>
        <span style="width:56%;display: inline-block;text-align: center;">审批</span>
        <span style="width:20%;display: inline-block;text-align: center;">通过</span>
      </p>
    </div>
    <div class="tip">
      您已经提交申请成为工匠提醒，我们会在7个工作日内核实您的身份，请等待！
    </div>
    <div class="btn">确定</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
  },
  mounted () { },
}
</script>
<style lang="scss">
#ApplicationProcess {
  height: 100vh;
  overflow: auto;
  position: relative;
  .line {
    width: 6px;
    height: 26px;
    background: #007aff;
    display: inline-block;
  }
  .top {
    height: 90px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 25px;
    text-align: center;
    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }
    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }
  .tip {
    width: 90%;
    margin: 0 auto;
    background-color: #ddd;
    padding: 10px;
    line-height: 40px;
    border-radius: 4px;
  }
  .btn {
    position: absolute;
    width: 90%;
    bottom: 10px;
    height: 50px;
    left: 5%;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
  }
}
</style>